import React, { useState, useEffect } from 'react'
import axios from '../../utils/index'
import { NavBar, Space, Toast, Tabs, Divider } from 'antd-mobile'
import { AimOutlined } from '@ant-design/icons';
import { Button } from "antd";
import {
  SearchOutline, MoreOutline, DownOutline, EnvironmentOutline
  , ClockCircleOutline, BankcardOutline, UpOutline, LocationFill
} from 'antd-mobile-icons'
import './Reserve.css'
import AMapExample from './AMapExample';

export default function Reserve() {
  let [flag1, setFlag1] = useState(false)
  let [flag2, setFlag2] = useState(false)

  const right = (
    <div style={{ fontSize: 24 }}>
      <Space style={{ '--gap': '16px' }}>
        <SearchOutline />
        <MoreOutline />
      </Space>
    </div>
  )

  const left = (
    <div className='Reserve-left'>
      <div className='Reserve-icon'>
        <img src='../1.png' />
      </div>
      <div className='Reserve-text'>我的预订</div>
    </div>
  )

  const back = () =>
    Toast.show({
      content: '点击了返回区域',
      duration: 1000,
    })

  const [data, setData] = useState([])

  const getData = async () => {
    let res = await axios.get('/getserve')
    if (res.data.code === 200) {
      setData(res.data.data.map(item => {
        return {
          ...item,
          flag: false
        }
      }))
    }
  }

  useEffect(() => {
    getData()
  }, [])

  const getTime = (time) => {
    let hours = time / 3600
    let minutes = (time % 3600) / 60
    return hours.toFixed(0) + '小时' + minutes.toFixed(0) + '分钟'
  }

  return (
    <div>
      <div className='Reserve-top-dis'>
        <NavBar backArrow={false} left={left} right={right} onBack={back}>
        </NavBar>

        <div style={{ marginTop: 20 }}>
          <Tabs className='Reserve-tabs'>
            <Tabs.Tab title='待出行' key='fruits'>
              {data.filter(item => item?.serve?.state == 1).map(items =>
                <div className='Reserve-list' key={items._id}>

                  <div className='Reserve-item'>
                    <img src="https://ts1.cn.mm.bing.net/th?id=OIP-C._YFRagbOM8FbGUSUJy-m6QAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="" />
                    <div className='Reserve-item-text'>
                      <div style={{ fontWeight: 700, fontSize: 16 }}>{items.serve.capitals.name}</div>
                      <div style={{ fontSize: 12 }}>{items.serve.capitals.brand}</div>
                    </div>
                    <div className='Reserve-item-status'>
                      <div className='Reserve-fu'>服务中</div>
                      <div>{items.serve.capitals.pai}</div>
                    </div>
                  </div>

                  {
                    items?.flag ?
                      <div style={{ display: items?.flag ? 'block' : 'none' }}>
                        <Divider />
                        <div className='Reserve-gong'>
                          <div>
                            <EnvironmentOutline />
                            <span className='Reserve-gong-text'>{(items.serve.distance / 1000).toFixed(2)}公里</span>
                          </div>
                          <div>
                            <ClockCircleOutline />
                            <span className='Reserve-gong-text'>{getTime(items.serve.time)}</span>
                          </div>
                          <div>
                            <BankcardOutline />
                            <span className='Reserve-gong-text'>{((items.serve.distance / 1000).toFixed(2) * 1) + 5}元</span>
                          </div>
                        </div>
                        <div className='Reserve-time'>
                          <div>预约时间</div>
                          <div className='Reserve-time-text'>{new Date().toLocaleString()}</div>
                        </div>
                        <Divider />

                        <div className='Reserve-address'>
                          <div className='connector'>- - -</div>
                          <div className='start-address'>
                            <div className='start-address-icon'><AimOutlined /></div>
                            <div className='start-address-text'>
                              <div className='start-address-text-title'>当前位置</div>
                              <div className='start-address-text-content'>{items.serve.originName}</div>
                            </div>
                          </div>
                        </div>

                        <div className='Reserve-address'>
                          <div className='start-address'>
                            <div className='start-address-icon'><LocationFill /></div>
                            <div className='start-address-text'>
                              <div className='start-address-text-title'>{items.serve.destinationName}</div>
                              <div className='start-address-text-content'>{items.serve.destinationName}</div>
                            </div>
                          </div>
                        </div>

                        <div className='Reserve-address-map'>
                          <AMapExample originName={items.serve.originName} destinationName={items.serve.destinationName}></AMapExample>
                        </div>
                        <div style={{ marginTop: 20 }}>
                          <Button type="primary" block>
                            联系司机
                          </Button>
                        </div>

                      </div>
                      : ''
                  }
                  <Divider />

                  <div className='Reserve-icons'>
                    {items.flag ? <UpOutline onClick={() => {
                      let list = data.map(item => {
                        if (item._id === items._id) {
                          return {
                            ...item,
                            flag: !item.flag
                          }
                        }
                        return item
                      })
                      setData(list)
                    }} /> : <DownOutline onClick={() => {
                      let list = data.map(item => {
                        if (item._id === items._id) {
                          return {
                            ...item,
                            flag: !item.flag
                          }
                        }
                        return item
                      })
                      setData(list)
                    }} />}
                  </div>

                </div>
              )}

            </Tabs.Tab>
            <Tabs.Tab title='已完成' key='vegetables'>
              {data.filter(item => item?.serve?.state == 2).map(items =>
                <div className='Reserve-list' key={items._id}>
                  <div className='Reserve-item'>
                    <img src="https://ts1.cn.mm.bing.net/th?id=OIP-C._YFRagbOM8FbGUSUJy-m6QAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="" />
                    <div className='Reserve-item-text'>
                      <div style={{ fontWeight: 700, fontSize: 16 }}>{items.serve.capitals.name}</div>
                      <div style={{ fontSize: 12 }}>{items.serve.capitals.brand}</div>
                    </div>
                    <div className='Reserve-item-status'>
                      <div className='Reserve-yi'>{items?.serve?.state == 2 ? '已完成' : '已取消'}</div>
                      <div>{items.serve.capitals.pai}</div>
                    </div>
                  </div>


                  <div style={{ display: items?.flag ? 'block' : 'none' }}>
                    <Divider />
                    <div className='Reserve-gong'>
                      <div>
                        <EnvironmentOutline />
                        <span className='Reserve-gong-text'>{(items.serve.distance / 1000).toFixed(2)}公里</span>
                      </div>
                      <div>
                        <ClockCircleOutline />
                        <span className='Reserve-gong-text'>{getTime(items.serve.time)}</span>
                      </div>
                      <div>
                        <BankcardOutline />
                        <span className='Reserve-gong-text'>{((items.serve.distance / 1000).toFixed(2) * 1) + 5}元</span>
                      </div>
                    </div>
                    <div className='Reserve-time'>
                      <div>预约时间</div>
                      <div className='Reserve-time-text'>{new Date().toLocaleString()}</div>
                    </div>
                    <Divider />

                    <div className='Reserve-address'>
                      <div className='connector'>- - -</div>
                      <div className='start-address'>
                        <div className='start-address-icon'><AimOutlined /></div>
                        <div className='start-address-text'>
                          <div className='start-address-text-title'>当前位置</div>
                          <div className='start-address-text-content'>{items.serve.originName}</div>
                        </div>
                      </div>
                    </div>

                    <div className='Reserve-address'>
                      <div className='start-address'>
                        <div className='start-address-icon'><LocationFill /></div>
                        <div className='start-address-text'>
                          <div className='start-address-text-title'>{items.serve.destinationName}</div>
                          <div className='start-address-text-content'>{items.serve.destinationName}</div>
                        </div>
                      </div>
                    </div>

                    <div style={{ marginTop: 20 }}>
                      <Button type="primary" block>
                        联系司机
                      </Button>
                    </div>

                  </div>
                  <Divider />
                  <div className='Reserve-icons'>
                    {items.flag ? <UpOutline onClick={() => {
                      let list = data.map(item => {
                        if (item._id === items._id) {
                          return {
                            ...item,
                            flag: !item.flag
                          }
                        }
                        return item
                      })
                      setData(list)
                    }} /> : <DownOutline onClick={() => {
                      let list = data.map(item => {
                        if (item._id === items._id) {
                          return {
                            ...item,
                            flag: !item.flag
                          }
                        }
                        return item
                      })
                      setData(list)
                    }} />}
                  </div>

                </div>
              )}


            </Tabs.Tab>
            <Tabs.Tab title='已取消' key='animals'>
              {data.filter(item => item?.serve?.state == 3).map(items =>
                <div className='Reserve-list' key={items._id}>

                  <div className='Reserve-item'>
                    <img src="https://ts1.cn.mm.bing.net/th?id=OIP-C._YFRagbOM8FbGUSUJy-m6QAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="" />
                    <div className='Reserve-item-text'>
                      <div style={{ fontWeight: 700, fontSize: 16 }}>{items.serve.capitals.name}</div>
                      <div style={{ fontSize: 12 }}>{items.serve.capitals.brand}</div>
                    </div>
                    <div className='Reserve-item-status'>
                      <div className='Reserve-qu'>{items?.serve?.state == 3 ? '已取消' : ''}</div>
                      <div>{items.serve.capitals.pai}</div>
                    </div>
                  </div>


                  <div style={{ display: items?.flag ? 'block' : 'none' }}>
                    <Divider />
                    <div className='Reserve-gong'>
                      <div>
                        <EnvironmentOutline />
                        <span className='Reserve-gong-text'>{(items.serve.distance / 1000).toFixed(2)}公里</span>
                      </div>
                      <div>
                        <ClockCircleOutline />
                        <span className='Reserve-gong-text'>{getTime(items.serve.time)}</span>
                      </div>
                      <div>
                        <BankcardOutline />
                        <span className='Reserve-gong-text'>{
                          ((items.serve.distance / 1000).toFixed(2) * 1) + 5
                        }元</span>
                      </div>
                    </div>
                    <div className='Reserve-time'>
                      <div>预约时间</div>
                      <div className='Reserve-time-text'>{new Date().toLocaleString()}</div>
                    </div>
                    <Divider />

                    <div className='Reserve-address'>
                      <div className='connector'>- - -</div>
                      <div className='start-address'>
                        <div className='start-address-icon'><AimOutlined /></div>
                        <div className='start-address-text'>
                          <div className='start-address-text-title'>当前位置</div>
                          <div className='start-address-text-content'>{items.serve.originName}</div>
                        </div>
                      </div>
                    </div>

                    <div className='Reserve-address'>
                      <div className='start-address'>
                        <div className='start-address-icon'><LocationFill /></div>
                        <div className='start-address-text'>
                          <div className='start-address-text-title'>{items.serve.destinationName}</div>
                          <div className='start-address-text-content'>{items.serve.destinationName}</div>
                        </div>
                      </div>
                    </div>

                    <div style={{ marginTop: 20 }}>
                      <Button type="primary" block>
                        联系司机
                      </Button>
                    </div>

                  </div>
                  <Divider />
                  <div className='Reserve-icons'>
                    {items.flag ? <UpOutline onClick={() => {
                      let list = data.map(item => {
                        if (item._id === items._id) {
                          return {
                            ...item,
                            flag: !item.flag
                          }
                        }
                        return item
                      })
                      setData(list)
                    }} /> : <DownOutline onClick={() => {
                      let list = data.map(item => {
                        if (item._id === items._id) {
                          return {
                            ...item,
                            flag: !item.flag
                          }
                        }
                        return item
                      })
                      setData(list)
                    }} />}
                  </div>

                </div>
              )}
            </Tabs.Tab>
          </Tabs>
        </div>

      </div>
    </div>
  )
}
